<template>
  <div class="right Bold">
    <div class="right_top ">
      <div class=" flex JustifyContentSA AlignItemsC" style="margin-top: 3rem;">
        <div class="flex AlignItemsC" style="margin-top: 2rem;  padding-left: 2rem;">
          <div class="women"></div>
          <div class=" flexC flex1" style="padding-left: 1rem;">
            <p class="colorF font_s20">女医生</p>
            <p class="font_s24 font_w4 quarter">{{ Man }}%</p>
          </div>
        </div>
        <div class="xuxian"></div>
        <div class="flex AlignItemsC" style="margin-top: 2rem; padding-right:2rem;">
          <div class="man"></div>
          <div class=" flexC flex1" style="padding-left: 1rem;">
            <p class="colorF font_s20">男医生</p>
            <p class="font_s24 font_w4 quarter1">{{ Woman }}%</p>
          </div>
        </div>
      </div>
    </div>
    <div class="right_bottom flex1 colorF ">
      <div class="flexC">
        <h2 class="textC colorF" style="padding: 1.5rem; color: rgb(255,255,255,0.8);">各地区工单TOP榜</h2>
        <div class="flex" style="padding: 2rem;">
          <div class=" flexC textC flex1 second JustifyContentFE">
            <span class="font_s20">{{ mapName[1] }}</span>
            <span class="font_s16">{{ mapNum[1] }}</span>
            <div style="padding: 0.5rem;"></div>
          </div>
          <div class="flex1 flexC textC  first JustifyContentFE">
            <span class="font_s20 font_w4 ouhai">{{ mapName[0] }}</span>
            <span class=" font_s16">{{ mapNum[0] }}</span>
            <div style="padding: 0.5rem;"></div>
          </div>
          <div class="flex1 flexC textC  third JustifyContentFE">
            <span class="font_s20">{{ mapName[2] }}</span>
            <span class="font_s16">{{ mapNum[2] }}</span>
            <div style="padding: 0.5rem;"></div>
          </div>
        </div>
      </div>
      <div class="flex1 font_s20" style="width: 100%; height: 40%;"><div id="chart2"></div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'right',
  components: {},
  data () {
    return {
      // 男女
      Woman: '',
      Man: '',
      // top榜
      mapName: [],
      mapNum: [],
      orderNumList: [],
      areaList: [],
      order: []
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 男女
      this.$http.get(this.$api.Manwoman.manwoman, true).then(result => {
        let arr = result.data.response.doctorSexProportion
        this.Woman = arr.Woman
        this.Man = arr.Man
        // console.log('14.获取男女医生比例', arr);
      })
      // top榜
      this.$http.get(this.$api.Hqgdwcsl.hqgdwcsl, true).then(result => {
        let arr = result.data.response.countTotalRegionOrder
        // console.log('15. 获取工单完成数量(会按照地区自动分类)', arr);

        let newArr = arr.slice(0, 3)
        for (let val of newArr.values()) {
          this.mapName.push(val.region)
          this.mapNum.push(val.num)
        }
        let obj = arr.slice(3)
        obj.forEach((val, i) => {
          this.order.push(i + 4)
          this.areaList.push(val.region)
          this.orderNumList.push(val.num)
        })

        this.orderSumFun(this.order.reverse(), this.areaList.reverse(), this.orderNumList.reverse())
      })
    },
    orderSumFun (order, arrX, arrY) {
      let myChart2 = this.$echarts.init(document.getElementById('chart2'))
      let option = {
        grid: {
          top: '2%',
          left: '15%',
          right: '30%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLine: {
              // y轴
              show: false
            },
            axisTick: {
              // y轴刻度线
              show: false
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#B8C3CC',
                fontSize: 16
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            show: true,
            position: 'left',
            offset: 70,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: order
          },
          {
            type: 'category',
            show: true,
            position: 'left',
            offset: 0,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: arrX
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '5',
            itemStyle: {
              normal: {
                color: '#0666E8',
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: arrY
          }
        ]
      }
      myChart2.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  #chart2 {
    width: 100%;
    height: 100%;
  }
  .right_top {
    position: absolute;
    top: 8%;
    right: 2rem;
    height: 20%;
    width: 25%;
    background: url(../../assets/img/home/datasea/right1.png) no-repeat;
    background-size: 100% 100%;

    .women {
      width: 3.3rem;
      height: 4.3rem;
      background: url(../../assets/img/home/datasea/women.png) no-repeat;
      background-size: 100% 100%;
    }
    .quarter {
      color: #fb9ed8;
    }
    .xuxian {
      margin-top: 2rem;
      width: 0.0625rem;
      height: 6rem;
      background: url(../../assets/img/home/datasea/3.png);
      background-size: 100% 100%;
    }
    .man {
      width: 3.3rem;
      height: 4.3rem;
      background: url(../../assets/img/home/datasea/man.png) no-repeat;
      background-size: 100% 100%;
    }
    .quarter1 {
      color: #33ebfe;
    }
  }
  .right_bottom {
    position: absolute;
    top: 30%;
    right: 2%;
    height: 65%;
    width: 25%;
    background: url(../../assets/img/home/datasea/right2.png) no-repeat;
    background-size: 100% 100%;

    .ranking-top {
      margin-top: 6.5rem;
      margin-bottom: 3rem;
    }

    .second {
      background: url(../../assets/img/home/datasea/er.png) no-repeat;
      background-size: 100% 100%;
      height: 12rem;
      margin-right: -0.8rem;
      margin-top: 2rem;
    }
    .first {
      background: url(../../assets/img/home/datasea/yi.png) no-repeat;
      background-size: 100% 100%;
      height: 15rem;
    }

    .third {
      background: url(../../assets/img/home/datasea/san.png) no-repeat;
      background-size: 100% 100%;

      height: 12rem;
      margin-left: -0.8rem;
      margin-top: 2rem;
    }

    .people {
      font-weight: 100;
      opacity: 0.5;
    }

    .ranking-bottom {
      width: 80%;
      margin-top: 2rem;
    }

    .rank-num {
      color: #fff;
      margin-left: 2rem;
    }

    .location {
      color: #fff;
      margin-left: 1rem;
    }

    .line {
      height: 0.3rem;
      background: #0666e8;
      /* width: 2rem; */
      margin-left: 1rem;
    }
  }
}
</style>
